<template>
    <view class="purchaseDetailContainer">
        <!-- 订单我的/预约上门 -->
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'我的订单'">
        </cunstom_navigation_bar>
        <view class="contentBox">
            <view class="tabs">
                <view @tap="changeSelecedIndex(0)" :class="selectedIndex==0?'tab selected':'tab'">商城订单</view>
                <view @tap="changeSelecedIndex(1)" :class="selectedIndex==1?'tab selected':'tab'">预约订单</view>
                <view @tap="changeSelecedIndex(2)" :class="selectedIndex==2?'tab selected':'tab'">无人柜订单</view>
            </view>
            <view class="statusBar">
                <view class="scrollX" v-if="selectedIndex == 0">
                    <!-- :class="{selectedIndex == index?'selected':''}" -->
                    <view v-for="(item,index) in statusArray0" @tap="changeIndex(index)" class="eachStatus">
                        <view class="statusText" :class="statusIndex == index?'selected':''">{{item.text}}</view>

                    </view>
                </view>
                <view class="scrollX" v-if="selectedIndex == 1">
                    <!-- :class="{selectedIndex == index?'selected':''}" -->
                    <view v-for="(item,index) in statusArray1" @tap="changeIndex(index)" class="eachStatus">
                        <view class="statusText" :class="statusIndex == index?'selected':''">{{item.text}}</view>

                    </view>
                </view>
            </view>
			<!--
            <view class="orderBox">
                <view class="line1">
                    <view class="left">2024-08-19 19:10:22</view>
                    <view class="right red">待付款</view>
                </view>
                <view class="line2">
                    <image class="orderImg" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/orderImg.png">
                    </image>
                    <view class="right">
                        <view class="name">厨娘上门</view>
                        <view class="labels">
                            <view class="label">代购费20元</view>
                            <view class="label">4-5菜+1汤</view>
                        </view>
                        <view class="sku">
                            <view class="price">￥<span>350</span></view>
                            <view class="num">x2</view>
                        </view>
                    </view>
                </view>
                <view class="line3">
                    <view class="num">共2件商品</view>
                    <view class="total">总金额:<span>￥700</span></view>
                </view>
                <view class="line4">0天00小时59分48秒后订单关闭</view>
                <view class="line5">
                    <view class="btn mg">取消订单</view>
                    <view class="btn red">去支付</view>
            
                </view>
            </view>
            <view class="orderBox">
                <view class="line1">
                    <view class="left">2024-08-19 19:10:22</view>
                    <view class="right">待上门</view>
                </view>
                <view class="line2">
                    <image class="orderImg" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/orderImg.png">
                    </image>
                    <view class="right">
                        <view class="name">厨娘上门</view>
                        <view class="labels">
                            <view class="label">代购费20元</view>
                            <view class="label">4-5菜+1汤</view>
                        </view>
                        <view class="sku">
                            <view class="price">￥<span class="red">800</span></view>
                            <view class="num">x1</view>
                        </view>
                    </view>
                </view>
                <view class="line3">
                    <view class="num">共2件商品</view>
                    <view class="total">实付:<span>￥800</span></view>
                </view>
      
                <view class="line5">
                    <view class="btn mg">再来一单</view>
                    <view class="btn mg">删除订单</view>
                    <view class="btn yellow">已上门</view>
          
                 
                </view>
            </view>
            <view class="orderBox">
                <view class="line1">
                    <view class="left">2024-08-19 19:10:22</view>
                    <view class="right">已完成</view>
                </view>
                <view class="line2">
                    <image class="orderImg" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/orderImg.png">
                    </image>
                    <view class="right">
                        <view class="name">厨娘上门</view>
                        <view class="labels">
                            <view class="label">代购费20元</view>
                            <view class="label">4-5菜+1汤</view>
                        </view>
                        <view class="sku">
                            <view class="price">￥<span class="red">350</span></view>
                            <view class="num">x2</view>
                        </view>
                    </view>
                </view>
                <view class="line3">
                    <view class="num">共2件商品</view>
                    <view class="total">总金额:<span>￥700</span></view>
                </view>
         
                <view class="line5">
           
                    <view class="btn mg">再来一单</view>
                    <view class="btn mg">删除订单</view>
 
                    <view class="btn yellow">评价</view>
                </view>
            </view>
			-->
			<view class="orderBox1" v-if="selectedIndex==0" v-for="(item,index) in shopOrderList">
			    <view class="line1" @tap="shopDetail">
			        <view class="item1">订单编号:{{item.order_sn}}</view>
			        <view class="right" v-if="item.status==1">代付款</view>
			        <view class="right" v-if="item.status==2">代自提</view>
			    </view>
			    <view class="line2" @tap="shopDetail">
			    	<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order1.png"></image>
			        <view class="item2">地址：{{item.address}}</view>
			    </view>
			    <view class="line3" @tap="shopDetail">
			    	<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order2.png"></image>
			        <view class="item2">{{item.receiver}}</view>
			    </view>
			    <view class="line4" @tap="shopDetail">
					<image class="img" v-for="(good ,index) in limitedItems(item.goods_list)" :src="good.image"></image>
			        <view class="right">共{{ getLength(item.goods_list) }}件商品</view>
				</view>
			    <view class="line5">
			        <view class="item1">时间 {{formatTimestamp(item.create_at)}}</view>
			        <view class="item2">实付</view>
			        <view class="right">{{item.payamount}}</view>
			    </view>
			    <view class="line6">
				</view>	
			   
			    <view class="line7">
					<view class="btn mg"  @tap="cancel( item )">取消订单</view>
					<view class="btn red" @tap="pay(item)">去支付</view>
			   			
			    </view>
			</view>
			

			<view class="orderBox" v-for="(item,index) in orderList"  v-if="selectedIndex==1">
				<view class="line1">
					<view class="left">{{ formatTimestamp(item.create_at)}}</view>
					<view class="right red" v-if="item.paystate == 0">待付款</view>
					<view class="right" v-if="item.shippingstate == 1">服务中</view>
					<view class="right" v-if="item.orderstate == 3">已完成</view>
				</view>
				<view class="line2" @tap="itemXiangq(item)">
					<image class="orderImg" :src="imgDomain + item.cook_info.avatar">
					</image>
					<view class="right">
						<view class="name">{{item.cookInfo.name}}</view>
						<view class="labels">
							<!--
							<view class="label">代购费20元</view>
							-->
							<view class="label">{{item.sku_info.goods_sku_text}}</view>
						</view>
						<view class="sku">
							<view class="price">￥<span>{{item.payamount}}</span></view>
							<view class="num">x1</view>
						</view>
					</view>
				</view>
				<view class="line3">
					<view class="num">共1件商品</view>
					<view class="total">总金额:<span>￥{{item.payamount}}</span></view>
				</view>
				<!--
				<view class="line4">0天00小时59分48秒后订单关闭</view>
				-->
				<view class="line5">
					<view class="btn mg" v-if="item.paystate == 0" @click="dialogToggle( item )">取消订单</view>
					<view class="btn red" v-if="item.paystate == 0">去支付</view>
			
				</view>
			</view>

        </view>



        <view class="zhanwei"></view>


		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title=" " content="确认取消订单？" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>

    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
				orderType: 0, 
                selectedIndex: 0,
                statusIndex: 0,
				// 订单状态:0=正常,1=已取消,2=已失效,3=已完成,4=退货退款中
                statusArray0: [
                    {
                        value: 0,
                        text: '全部'
                    },
                    {
                        value: 1,
                        text: '待付款'
                    },
                    {
                        value: 2,
                        text: '待收货'
                    },
                    {
                        value: 3,
                        text: '已完成'
                    }

                ],
                statusArray1: [
                    {
                        value: 0,
                        text: '全部'
                    },
                    {
                        value: 1,
                        text: '待付款'
                    },
                    {
                        value: 2,
                        text: '服务中'
                    },
                    {
                        value: 3,
                        text: '已完成'
                    }

                ],
                imgDomain: "",

                labels: [
                    {
                        name: '厨艺很好',
                        selected: true
                    },
                    {
                        name: '特别美味',
                        selected: true
                    },
                    {
                        name: '很好吃',
                        selected: false
                    },
                    {
                        name: '特别谦虚',
                        selected: false
                    }
                ],
                propStyles: {
                    iconSrc: "black",
                    // bgColor: '#FECF01',
                },
				queryParams: {
					"page": 1,
					"limit": 20,
					"orderstate": 0
				},
				totalCount: 0,
				orderList: [],
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				orderDetail: null,
				shopOrderList: [],
				shopTotalCount: 0,
            };
        },
        computed: {

        },
        methods: {
			getLength(goods_list){
				let len = 0;
				if(goods_list ){
					len = goods_list.length;
				}
				
				return len;
			},
			limitedItems(goods_list) {
				console.log("#####################goods_list:"+goods_list)
				if(goods_list ){
					console.log("->goods_list.length:"+goods_list.length);
				}
				
			    // 使用 slice 方法来获取前三个元素
				if(goods_list && goods_list.length>3){
					return goods_list.slice(0, 3);
				}else{
					return goods_list;
				}
			},
			formatTimestamp(timestamp){
				console.log("->timestamp:"+ timestamp);
				// 创建一个 Date 对象
				    const date = new Date(timestamp*1000);
				 
				    // 提取年、月、日、小时、分、秒
				    const year = date.getFullYear();
				    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
				    const day = String(date.getDate()).padStart(2, '0'); // 补零
				    const hours = String(date.getHours()).padStart(2, '0'); // 补零
				    const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
				    const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
				 
				    // 格式化输出
				    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			changeSelecedIndex(index){
				this.selectedIndex = index;
				this.changeIndex(0);
			},
            changeIndex(index) {
                this.statusIndex = index;
				this.queryParams.status = index;
				this.queryParams.page = 1;
				this.orderList = [];
				if(this.selectedIndex==0){
					this.getShopOrderList()
				}else if(this.selectedIndex==1){
					this.getOrderList();
				}
            },
            // 相关证书
            goBack() { 
                uni.navigateBack()
            },
            change(index) {
                this.labels[index].selected = !this.labels[index].selected
            },

            jumpUrl(num) {
                if (num == 1) {
                    uni.navigateTo({

                        url: `/page_changeAddress/changeAddress?id=${this.defaultAddress.id}&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 2) {
                    uni.navigateTo({
                        url: `/page_addressEdit/addressEdit?id=null&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 3) {
                    uni.navigateTo({
                        url: `/page_protocol/protocol`,
                    })
                }

            }, 
            goback() {
                console.log("回去");
                uni.navigateBack();
            },
			// 订单列表
			getOrderList(){
				let that = this;
				util.request(api.orderList, this.queryParams
				  , 'GET', 'application/json').then(res => {
				    if (res.code == 200) {
				      this.orderList = this.orderList.concat(res.data.data);
					  this.totalCount = res.data.total;
					 
				    }
				  }).catch((err) => {
				    console.log('err', err)
				
				  });
			},
			// 商品详情
			itemXiangq(item){
				uni.navigateTo({
				    url: `/page_cookOrderDetail/cookOrderDetail?orderDetailStr=`+JSON.stringify(item),
				})
			},
			// 商品列表
			getShopOrderList(){
				let that = this;
				util.request(api.getShopOrderList, this.queryParams
				  , 'GET', 'application/json').then(res => {
				    if (res.code == 200) {
				      this.shopOrderList = this.shopOrderList.concat(res.data.data);
					  this.shopTotalCount = res.data.total;
					 
				    }
				  }).catch((err) => {
				    console.log('err', err)
				
				  });
			},
			// 
			shopDetail(){
				uni.navigateTo({
				    url: `/page_myOrder/shopOrderDetail`,
				})
			},
			// 
			dialogToggle(item){
				this.orderDetail = item;
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				let that = this;
				
				if(this.selectedIndex==0){ // 取消商品订单
					
				}
				else if(this.selectedIndex==1){ // 取消厨娘订单
					let formData = {
						'orderstate' : 1,
						'id' : that.orderDetail.id
					};
					util.request(api.orderUpdate, formData
					  , 'POST', 'application/x-www-form-urlencoded').then(res => {
						if (res.code == 200) {
							that.orderList = [];
							that.getOrderList();
						} 
					}).catch((err) => {
						console.log('err', err)
						reject(err);
					});
				}
				
			},
			dialogClose() {
				console.log('点击关闭')
			},
			pay(orderDetail){
				let payParams = {
					type : 'shop',
					order_id : orderDetail.id
				};
				let that = this;
				util.request(api.cookPaySFT, payParams
				  , 'POST', 'application/x-www-form-urlencoded').then(res => {
				    if (res.code == 200) {
						let outTradeNo = res.data.outTradeNo;
						uni.requestPayment({
						  //provider: 'wxpay',
						  timeStamp: res.data.timeStamp,
						  nonceStr: res.data.nonceStr,
						  package: res.data.package,
						  // signType: 'MD5',
						  signType: res.data.signType,
						  paySign: res.data.paySign,
						  success: function (res) {
						    //支付成功，跳转完成支付订单详情页
						    console.log('success:' + JSON.stringify(res));
							that.getShopOrderList();
						  },
						  fail: function (err) {
						    console.log('fail:' + JSON.stringify(err));
						    //支付不成功，跳转未支付订单详情页
							that.getShopOrderList();
							 
						  }
						});
					}
				});
			},
			cancel(orderDetail){ // 
				let payParams = {
					id : orderDetail.id,
					orderstate : 1
				};
				let that = this;
				util.request(api.orderUpdate, payParams
				  , 'POST', 'application/x-www-form-urlencoded').then(res => {
				    if (res.code == 200) {
						util.toast('取消成功')
						that.getShopOrderList();
					}
				});
			}

        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {

        },
        onLoad: function (option) {

            this.imgDomain = process.env.VUE_APP_BASE_URL;

			this.getShopOrderList();

        },
		// 上拉加载
		onReachBottom() {
		  if (this.totalCount > this.orderList.length) {
			this.queryParams.page = this.queryParams.page + 1;
			if(this.selectedIndex==0){
				this.getShopOrderList()
			}else if(this.selectedIndex==1){
				this.getOrderList();
			}
		  }
		}

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }

    .contentBox {
        width: 100%;

        .tabs {
            display: flex;
            width: 100%;
            padding: 0rpx 42rpx;
            justify-content: space-between;
            height: 112rpx;
            align-items: center;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 0rpx 0rpx 0rpx 0rpx;

            .tab {
                font-weight: 500;
                font-size: 28rpx;
                color: rgba(51, 51, 51, 0.6);
                padding: 0rpx 24rpx;
                height: 66rpx;
                line-height: 66rpx;
            }

            .selected {
                padding: 0rpx 24rpx;
                height: 66rpx;
                line-height: 66rpx;
                background: #FECF01;
                border-radius: 20rpx 20rpx 20rpx 20rpx;
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
            }
        }

        .statusBar {
            width: 750rpx;
            height: 120rpx;
            overflow-x: auto;

            .scrollX {
                display: flex;
                height: 100%;
                align-items: center;
                padding-left: 30rpx;
                width: 100%;

                .eachStatus {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    /* margin-right: 50rpx; */
                    width: 25%;

                    .statusText {
                        font-weight: 500;
                        font-size: 28rpx;
                        color: rgba(51, 51, 51, 0.6);
                        text-align: center;
                        line-height: 56rpx;

                    }

                    .selected {
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #D93F11;
                        width: 112rpx;
                        height: 56rpx;
                        background: rgba(254, 207, 1, 0.1);
                        border-radius: 20rpx 20rpx 20rpx 20rpx;

                    }


                }


            }
        }

        .orderBox {
            padding: 26rpx 30rpx 36rpx;
            width: 750rpx;
            margin-bottom: 24rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            .line1 {
                display: flex;
                justify-content: space-between;
                margin-bottom: 14rpx;

                .left {
                    font-weight: 500;
                    font-size: 28rpx;
                    color: rgba(51, 51, 51, 0.6);
                }

                .right {
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #333333;
                }


                .red {
                    color: #D93F11;
                }
            }

            .line2 {
                display: flex;


                .orderImg {
                    width: 208rpx;
                    height: 208rpx;
                    margin-right: 24rpx;
                }

                .right {
                    width: 458rpx;

                    .name {
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #333333;
                        margin-bottom: 20rpx;
                    }

                    .labels {
                        display: flex;

                        .label {
                            padding: 0rpx 6rpx;
                            height: 34rpx;
                            line-height: 34rpx;
                            background: rgba(51, 51, 51, 0.1);
                            border-radius: 10rpx 10rpx 10rpx 10rpx;
                            margin-right: 12rpx;
                            font-weight: 500;
                            font-size: 16rpx;
                            color: rgba(51, 51, 51, 0.6);
                        }
                    }

                    .sku {
                        width: 458rpx;
                        margin-top: 62rpx;
                        display: flex;
                        justify-content: space-between;

                        .price {
                            font-weight: 500;
                            font-size: 20rpx;
                            color: #333333;

                            span {
                                font-weight: 700;
                                font-size: 28rpx;
                                color: #333333;
                            }
                            .red{
                                color:#D93F11;
                            }
                        }

                        .num {
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #333333;
                        }

                    }
                }
            }

            .line3 {
                width: 100%;
                justify-content: flex-end;
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;
                .num {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: rgba(51, 51, 51, 0.6);
                    margin-right: 22rpx;
                }

                .total {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: rgba(51, 51, 51, 0.6);

                    span {
                        color: #D93F11;
                        font-size: 28rpx;
                        font-weight: 700;
                    }
                }

            }

            .line4 {
                font-weight: 400;
                font-size: 24rpx;
                color: #D93F11;
                width: 100%;
                justify-content: flex-end;
                display: flex;
                margin-bottom: 20rpx;
            }

            .line5 {
                justify-content: flex-end;
                display: flex;

                .btn {
                    width: 146rpx;
                    height: 56rpx;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    border: 2rpx solid rgba(51, 51, 51, 0.4);
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #333333;
                    line-height: 56rpx;
                    text-align: center;
                }

                .mg {
                    margin-right: 30rpx;
                }

                .red {
                    width: 146rpx;
                    height: 56rpx;
                    background: #D93F11;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    line-height: 56rpx;
                }

                .yellow {
                    width: 146rpx;
                    height: 56rpx;
                    background: #FECF01;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                }
            }
        }
    
		.orderBox1 {
		    padding: 26rpx 30rpx 36rpx;
		    width: 750rpx;
		    margin-bottom: 24rpx;
		    background: #FFFFFF;
		    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
		    border-radius: 20rpx 20rpx 20rpx 20rpx;
		    lign-items: center;
			.line1{
				width: 100%;
				height: 50rpx;
				padding-left: 0rpx;
				padding-right: 0rpx;
				margin-top: 28rpx;
				display: flex; /* 启用Flexbox布局 */
				flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				display: flex; /* 启用Flexbox布局 */
				align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				.item1{
					height: 28rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 24rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.right{
					margin-left: auto;
					margin-right: 0rpx;
					width: 84rpx;
					height: 50rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 50rpx;
					text-align: right;
					font-style: normal;
					text-transform: none;
				} 
			}
			.line2{
				width: 100%;
				height: 50rpx;
				padding-left: 0rpx;
				padding-right: 0rpx;
				margin-top: 0rpx;
				display: flex; /* 启用Flexbox布局 */
				flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				display: flex; /* 启用Flexbox布局 */
				align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				.item1{
					width: 36rpx;
					height: 36rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
				.item2{
					margin-left: 12rpx;
					width: auto;
					height: 40rpx;
				  	line-height: 40rpx; /* 行高与容器高度一致，实现垂直居中 */
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				  	/* 文字垂直居中的关键 */
					display: flex; /* 将.item也设为Flex容器 */
				  	align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
				}
			}
			.line3{
				width: 100%;
				height: 50rpx;
				padding-left: 0rpx;
				padding-right: 0rpx;
				margin-top: 0rpx;
				display: flex; /* 启用Flexbox布局 */
				flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				display: flex; /* 启用Flexbox布局 */
				align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				.item1{
					width: 36rpx;
					height: 36rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
				.item2{
					margin-left: 12rpx;
					width: 238rpx;
					height: 32rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				  	/* 文字垂直居中的关键 */
					display: flex; /* 将.item也设为Flex容器 */
				  	align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
				}
			}
		    .line4{
				width: 694rpx;
				height: 204rpx;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				margin-top: 15rpx;
				display: flex; /* 启用Flexbox布局 */
				flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				display: flex; /* 启用Flexbox布局 */
				align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				
				.img{
					width: 112rpx;
					height: 120rpx;
					box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0,0,0,0.1);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin-left: 28rpx;
				}
				.right{
					margin-left: auto;
					margin-right: 50rpx;
					width: 112rpx;
					height: 50rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(51,51,51,0.6);
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				} 
			}
			.line5{
				width: 100%;
				height: 50rpx;
				padding-left: 0rpx;
				padding-right: 0rpx;
				margin-top: 28rpx;
				display: flex; /* 启用Flexbox布局 */
				flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				display: flex; /* 启用Flexbox布局 */
				align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				.item1{
					width: auto;
					height: 50rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(51,51,51,0.6);
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.item2{
					margin-left: auto;
					margin-right: 10rpx;
					height: 50rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(51,51,51,0.6);
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				} 
				.right{
					margin-right: 8rpx;
					height: 50rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 500;
					font-size: 28rpx;
					color: red;
					line-height: 50rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				} 
			}
			.line6{
				  width: 690rpx;
				  height: 0rpx;
				  margin-top: 24rpx;
				  border: 2rpx solid rgba(216,216,216,0.6);
			}
            .line7 {
                justify-content: flex-end;
                display: flex;
				margin-top: 24rpx;
                .btn {
                    width: 146rpx;
                    height: 56rpx;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    border: 2rpx solid rgba(51, 51, 51, 0.4);
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #333333;
                    line-height: 56rpx;
                    text-align: center;
                }

                .mg {
                    margin-right: 30rpx;
                }

                .red {
                    width: 146rpx;
                    height: 56rpx;
                    background: #D93F11;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    line-height: 56rpx;
                }

                .yellow {
                    width: 146rpx;
                    height: 56rpx;
                    background: #FECF01;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                }
            }
		}
	}
</style>